<body>
  响应式练习：<br />
  let a = 10;<br />
  let b = a * 10;<br />
  题目： 保持 b永远是a得十倍 <br />

</body>

<script>
  // 依赖跟踪
  var activeEffect;
  class Dep {
    subscribers = new Set()
    depend() {
      if (activeEffect) {
        this.subscribers.add(activeEffect);
      }
    }
    notify() {
      this.subscribers.forEach(effect => {
        effect()
      })
    }
  }

  // 为了使用dep，需要将他保存起来
  // WeakMap() 拥有自动销毁对象，包括上面得属性得功能，所以使用它来保存，而不是Map.同时他要求每一个key都是一个map对象
  // Map时可迭代得，这个list数组在内存中保存着每一对key/value，很容易导致垃圾回收机制无法释放他们而引起内存泄漏
  // 相反的，WeakMap是不可迭代得，因为它是弱引用，不存在list数组，一旦没有引用，上面得每一对key/value都是可以随时释放得.

  const targetMap = new WeakMap();

  function getDep(target, key) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap)
    }
    let dep = depsMap.get(key)
    if (!dep) {
      dep = new Dep()
      depsMap.set(key, dep)
    }
    return dep
  }
  const reactiveHandles = {
    get(target, key, receiver) {
      let dep = getDep(target, key)
      dep.depend()
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      let dep = getDep(target, key)
      var result = Reflect.set(target, key, value, receiver);
      dep.notify();
      return result
    }
  }

  function reactive(raw) {
    return new Proxy(raw, reactiveHandles)
  }

  // 副作用函数
  function watchEffect(effect) {
    activeEffect = effect
    effect()
    activeEffect = null
  }

  var state = reactive({
    count: 0
  })

  watchEffect(() => {
    console.log(state.count)
    console.log(state.msg)
  }) // 0

  state.count++ // 1

  // 使用proxy 就可以将未定义在state上得属性进行代理
  // 代理得核心本质在于：代理是应用于对象上得，而非对象上得属性
  state.msg ="123"

</script>